<html>
<head>
    <style>
        body {
            margin: 0 auto;
            background-color: black;
        }
        input {
            width: 285px;
            margin: 8px auto;
            border: 0;
            padding: 4px;
            margin-left: 16px;
            outline: none;
            border-bottom: 2px solid #333;
            color: #333;
            font-weight: bold;
        }
        :disabled {
            opacity: .5;
            background-color: transparent;
        }
        ul {
            list-style: none;
            margin: 0 auto;
        }
        li {
            padding-bottom: 8px;
        }
        ::-webkit-scrollbar {
            width: 14px;
            height: 14px;
            background: transparent;
        }
        ::-webkit-scrollbar-track-piece {
            background: transparent none;
            border: solid 2px transparent;
            border-right-width: 8px;
            margin: 4px;
        }
        ::-webkit-scrollbar-thumb {
            border: solid 0 transparent;
            border-right-width: 4px;
            -webkit-border-radius: 5px;
            -webkit-border-top-right-radius: 9px 5px;
            -webkit-border-bottom-right-radius: 9px 5px;
            -webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);
        }
        .thumbnail {
            margin-right: 315px;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            cursor: pointer;
        }
        .empty {
            background-image: url('icons/128.png');
            background-size: 96px;
            opacity: .2;
            transition: .2s all ease-in-out;
        }
        .empty:hover {
            background-size: 128px;
            opacity: .6;
        }
        .details {
            position: fixed;
            right: 0;
            top: 0;
            height: 100%;
            width: 315px;
            background-color: #FFF;
            overflow-y: scroll;
        }
        .exif {
            margin-top: 8px;
            padding: 0 16px;
        }
        .exif span {
            padding: 4px;
            line-height: 24px;
        }
        .tag-name {
            font-weight: bold;
            color: #FFF;
            background: #333;
            border-right: 1px solid #white;
            border-radius: 4px 0 0 4px;
        }
        .tag-description {
            background: #1ED2FF;
            border-radius: 0 4px 4px 0;
        }
    </style>
</head>
<body>
    <div class="thumbnail empty"></div>
    <div class="details">
        <input type="search" placeholder="Filter..." disabled/>
        <ul class="exif"></ul>
    </div>
    <script src="ExifReader.js"></script>
    <script src="app.js"></script>
</body>
</html>
